<script setup>
import { reactive, computed } from 'vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import axios from '../service/request/axios'
import { v4 as uuidv4 } from 'uuid'
const router = useRouter()
const store = useStore()
const data = computed(() => store.state.data)
const status = computed(() => store.state.status)
const sayId = computed(() => store.state.sayId)
const dataForm = reactive({
    centerDialogVisible: false,
    url: ''
})
const sayForm = reactive({
    sayDialogVisible: false,
    name: ''
})
const openDialog = () => {
    dataForm.centerDialogVisible = true
}
// 设置系统环境api地址
function submit() {
    ElMessageBox.confirm('设置系统环境后需重新登入?', '注意', {
        confirmButtonText: '重新登入',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        localStorage.setItem('api_url', dataForm.url)
        axios.defaults.baseURL = dataForm.url
        router.push('/login')
        dataForm.centerDialogVisible = false
    })
}
function tabChat(item) {
    store.commit('setSayType', item)
    store.commit('setTabSessionMsg', item.sessionMsg)
}
//新建对话
function newSay(type) {
    const id = uuidv4()
    let item = {}
    if (type == 1) {
        item = {
            name: 'Untitled',
            type,
            id,
            sessionMsg: [
                // {
                //     content: { finish_reason: 'null', text: text },
                //     request_id: uuidv4(),
                //     role: 'user'
                // }
            ]
        }
    } else {
        item = {
            name: 'Untitled',
            type,
            id,
            sessionMsg: [
                {
                    text: text,
                    request_id: uuidv4()
                }
            ]
        }
    }
    data.value.push(item)
    tabChat(item)
    store.commit('setData', data.value)
}
// 编辑会话名称
function edit(item) {
    sayForm.id = item.id
    sayForm.name = item.name
    sayForm.sayDialogVisible = true
}
// 编辑会话名称
function submitSay() {
    const arr = data.value.map((item) => {
        if (item.id == sayForm.id) {
            item.name = sayForm.name
        }
        return item
    })
    sayForm.sayDialogVisible = false
    store.commit('setData', arr)
}
// 删除会话
function del(obj) {
    ElMessageBox.confirm(
        '删除后对话记录无法恢复和找回，请谨慎操作',
        '确认删除这 1 条对话记录吗？',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        var arr = []
        data.value.forEach((item) => {
            if (item.id != obj.id) {
                arr.push(item)
            }
        })
        store.commit('setData', arr)
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
    }).catch(() => {
    })
}
// 删除所有会话
function delAll(){
    ElMessageBox.confirm(
        '删除后对话记录无法恢复和找回，请谨慎操作',
        '确认删除所有对话记录吗？',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        store.commit('setData', [])
        ElMessage({
            type: 'success',
            message: '清空成功'
        })
    }).catch(() => {
    })
}
</script>
<template>
    <div class="header">
        <div class="title">
            <img src="../assets/img/icon.png" alt="" height="30px" />
            <div class="name">ChatGPT</div>
        </div>
        <div class="Dialogue">
            <div class="DialogueTitle">
                <div class="name">对话</div>
                <div class="clear" @click="delAll">
                    <el-icon size="16"><FolderDelete /></el-icon>
                </div>
            </div>
            <div class="DialogueList">
                <div v-for="item in data" :key="item.id" :class="{ active: item.id == sayId }"  @click="tabChat(item)">
                    <el-icon v-if="item.type == 1"><ChatSquare /></el-icon>
                    <el-icon v-if="item.type == 2"><PictureFilled /></el-icon>
                    <span>{{ item.name }}</span>
                    <el-popover placement="right" :width="40" trigger="click">
                        <template #reference>
                            <div class="dian">
                                <el-icon><MoreFilled /></el-icon>
                            </div>
                        </template>
                        <template #default>
                            <div class="operate" @click="edit(item)">
                                <el-icon size="15"><Edit /></el-icon>
                                <span>重命名</span>
                            </div>
                            <div class="operate" @click="del(item)">
                                <el-icon size="15" color="#e63224"><Delete /></el-icon>
                                <span style="color:#e63224">删除此对话</span>
                            </div>
                        </template>
                    </el-popover>
                </div>
            </div>
        </div>
        <div class="setting">
            <div @click="newSay(1)">
                <el-icon size="15"><CirclePlus /></el-icon>
                <span>新对话</span>
            </div>
            <div @click="newSay(2)">
                <el-icon size="15"><PictureFilled /></el-icon>
                <span>新图片</span>
            </div>
            <div @click="openDialog">
                <el-icon size="15"><Tools /></el-icon>
                <span>设置</span>
            </div>
            <div class="about">
                <el-icon size="15"><Warning /></el-icon>
                <span>关于</span>
            </div>
        </div>
        <el-dialog v-model="dataForm.centerDialogVisible" title="setting" width="40%">
            <div>
                <el-input v-model="dataForm.url" placeholder="请输入变量" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dataForm.centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="sayForm.sayDialogVisible" title="重命名" width="40%">
            <div>
                <el-input v-model="sayForm.name" placeholder="请输入名称" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="sayForm.sayDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitSay">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <div v-if="!status" class="masking"> </div>
    </div>
</template>

<style lang="stylus" scoped>
.header
    width 100%
    height: 100%
    padding: 0 0 0 10px
    position relative
    .title
        height: 60px
        display: flex
        align-items: center
        .name
            margin-left: 10px
            font-size 19px
    .Dialogue
        height: calc(100% - 260px)

        .DialogueTitle
            display: flex
            align-items: center
            justify-content: space-between
            color: #999
            .name
                font-size 13px
            .clear
                width: 27px
                height: 27px
                display: flex
                align-items: center
                justify-content: center
                margin-left: 10px
                border-radius: 8px
                &:hover{
                    background: #e9ebf1
                }
        .DialogueList
            height: calc(100% - 27px)
            overflow hidden
            overflow-y: auto
            padding-right:10px
            >div
                height: 35px
                display: flex
                justify-content: space-between
                align-items: center
                color: #444
                cursor pointer
                font-size 14px
                padding: 0 10px
                &:hover{
                    background: #e9ebf1
                }
                >span
                    margin-left: 10px
                    width: 100%;
            .active
                background: #e9ebf1
            .dian
                height: 25px;
                width: 25px;
                text-align: center;
                line-height: 28px;
                border-radius: 8px
                &:hover{
                    background: #dcdde3
                }
    .setting
        position: absolute
        bottom: 0
        width 100%
        height: 200px
        left: 0
        padding: 10px
        border-top: 1px solid #eee
        >div
            height: 35px
            display: flex
            align-items: center
            padding: 0 10px
            font-size 14px
            color: #666
            cursor pointer
            &:hover{
                background: #e9ebf1
            }
            >span
                margin-left: 10px
        .about
             color: #999
    .masking
        width 100%
        height: 100%
        position: absolute
        left: 0
        top:0
        z-index 999
        cursor: not-allowed;
</style>
